function ModifiModal(){
    this.createDom();
	this.addListener();
}

ModifiModal.template=`<!-- 分类页面 -->
<div style="border:1px solid #e5e5e5; margin-left:350px;margin-top:100px;" class="hide" id="box7">
    <div role="tabpanel" class="tab-pane" id="xxxxb">

      <form class="form-horizontal" style="margin-top: 30px;">
         <div class="form-group">
        <label for="xxc" class="col-sm-2 control-label">原密码</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="xxxxc" style="width:443px;" placeholder="原密码">
        </div>
      </div>
    <div class="form-group">
                <label for="xxxxd" class="col-sm-2 control-label">新密码</label>
                <div class="col-sm-10">
                <input type="password" class="form-control" id="xxxxd" style="width:443px;" placeholder="新密码">
                </div>
            </div>

          <div class="form-group" >
            <div class="col-sm-offset-2 col-sm-10">
              <button type="button" class="btn btn-default" style="background: #438EB9; color: white;">修改</button>
            </div>
          </div>
        </form>
    </div>
    
  </div>

</div>`;

$.extend(ModifiModal.prototype, {
	// 创建DOM元素并渲染
	createDom() {
		$(ModifiModal.template).appendTo("body");
	},
	// 注册事件监听
	addListener() {
		
        $("#modifi").on("click", this.ModifiHandler);
        // $('#myTabs a').click(function (e) {
        //     e.preventDefault()
        //     $(this).tab('show')
        //   });
        //   $('#myTabs a[href="#profile"]').tab('show') ;// Select tab by name
        //   $('#myTabs a:first').tab('show'); // Select first tab
	},
	// 登录业务处理
	ModifiHandler() {
        
        $("#box7").removeClass("hide");
        $("#box1").hide();
        $("#box7").show();
        $("#box3").hide();
        $("#box2").hide();
        $("#box4").hide();
        $("#box5").hide();
        $("#box6").hide();
	}
}); 

new ModifiModal();